// components/s-selector/s-selector.ts
var myBehavior = require('../s-selector-menu/my-behavior')
Component({
  behaviors: [myBehavior],
  options: {
    addGlobalClass: true
  },
  relations: {
    '../s-selector-menu/s-selector-menu': {
      type: 'parent', // 关联的目标节点应为父节点
      linked: function (target) {
        // 每次被插入到custom-ul时执行，target是custom-ul节点实例对象，触发在attached生命周期之后
        // console.log(target, "child-target")
      },
      linkChanged: function (target) {
        // 每次被移动后执行，target是custom-ul节点实例对象，触发在moved生命周期之后
      },
      unlinked: function (target) {
        // 每次被移除时执行，target是custom-ul节点实例对象，触发在detached生命周期之后
      }
    }
  },
  properties: {
    // options 格式[label, value] 目前不支持 修改属性名
    options: {
      type: Array,
      value: []
    },
    defaultValue: {
      type: String,
      value: ""
    },
    // 父组件双向绑定的值不能是复杂路径属性
    value: {
      type: String,
      value: ""
    },
    placeholder: {
      type: String,
      value: ""
    },
    key: {
      type: String,
      value: ""
    },
    style: {
      type: String,
      value: ""
    }
  },
  /**
   * 页面的初始数据
   */
  data: {
    visible: false,
    multiple: false,
    defaultValueArray: [],
    label: "",
    customStyle: "top: 132px",
    idName: "singleselectorID",
    activeFlag: false,
    app: getApp()
  },
  // 数据监听
  observers: {
    "visible": function () {
      if (this.data.visible) {
        this.initValue()
        this.getTop()
      }
    },
  },
  methods: {
    // 触发更新 触发父组件事件
    updateVisible(currentKey: string) {
      let nodes = this.getRelationNodes("../s-selector-menu/s-selector-menu");
      let parent = nodes[0]
      parent.data.currentKey = currentKey;
      parent.updateData();
    },
    // 触发关闭
    toggleClose() {
      const nullFlag = this.nullJudge(this.data.value);
      this.setData({
        visible: false,
        activeFlag: nullFlag ? true : false
      })
    },
    labelClickHandle(e: any) {
      const currentKey = e.currentTarget.dataset.key;
      this.updateVisible(currentKey);
      this.setData({
        visible: !this.data.visible,
      }, () => {
        if (this.data.visible) {
          this.setData({
            activeFlag: true
          })
        } else {
          const nullFlag = this.nullJudge(this.data.value);
          this.setData({
            activeFlag: nullFlag ? true : false
          })
        }

      })
    },
    colseHandle(e: any) {
      if (e.target.dataset.name === "mask") {
        const nullFlag = this.nullJudge(this.data.value);
        this.setData({
          visible: false,
          activeFlag: nullFlag ? true : false
        })
      }
    },
    // 判断值是否为空
    nullJudge(value: any) {
      if (value === 0) {
        return true;
      } else {
        return !!value;
      }
    },
    // 点击选择
    selectHandle(e: any) {
      let id = e.currentTarget.dataset.id;
      // 单选
      this.singleHandle(id);
    },
    // 单选 
    singleHandle(id: [string | number]) {
      let options = this.data.options.slice();
      let result = {};
      options.forEach((item: any, index) => {
        if (item.value === id) {
          options[index]["checked"] = true;
          result = options[index];
        } else {
          options[index]["checked"] = false;
        }
      })

      this.setData({
        options
      }, () => {
        const nullFlag = this.nullJudge(result.value);
        this.setData({
          visible: false,
          // activeFlag: result.value? true: false,
          // label: result.value? result.label : this.data.placeholder,
          activeFlag: nullFlag,
          label: nullFlag ? result.label : this.data.placeholder,
          value: result.value
        })
        this.triggerEvent("onchange", result);
      })
    },
    getTop() {
      // 获取元素距离屏幕顶部的距离 + 元素的高度，设置fixed 定位的top
      //#member节点的距离顶部的距离
      const query = wx.createSelectorQuery().in(this)
      query.select("#" + this.data.idName + this.data.key).boundingClientRect((rect) => {
        // let fixedTop = rect.top + rect.height + 2;
        let fixedTop = rect.height + 2;
        // console.log(rect.top, "rect.top")
        // console.log(rect.height, "rect.height")
        this.setData({
          customStyle: `top: ${fixedTop}px;`
        })
      }).exec()
    },
    // 绑定值初始化
    initValue() {
      let defaultValue = this.data.defaultValue;
      if (defaultValue && defaultValue.length > 0) {
        let options = this.data.options.slice()
        options.forEach((item, index) => {
          if (defaultValue.indexOf(item.value) < 0) {
            options[index]["checked"] = false;
          } else {
            options[index]["checked"] = true;
          }
        })
        this.setData({
          options
        })
      }
    },
  },
  lifetimes: {
    attached: function () {
      this.setData({
        label: this.data.placeholder
      })
      // getApp().watch('sselectorKey', (key,value) => {
      //   console.log(key, value)
      // })
    },
  },
  pageLifetimes: {
    hide() {
      this.setData({ visible: false })
    }
  }

})